<template>
  <!-- 加载组件 -->
  <van-loading type="spinner" v-if="!isShow" vertical size="30px" color="#969799" style="margin-top: 10vh;">加载中...
  </van-loading>

  <div class="community-recommend-container" v-if="isShow">
    <!-- 轮播图 -->
    <Swiper :banner="bannerList"></Swiper>
    <!-- 分区 -->
    <scroll-ydiv class="zoning-div" :friendAvatar="zoningList" :isRadius="true"></scroll-ydiv>
    <!-- 动态列表 -->
    <van-pull-refresh v-model="pullLoading" success-text="刷新成功~" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <community-item v-for="itemInfo in dynInfo" :comItemInfo="itemInfo"></community-item>
      </van-list>
    </van-pull-refresh>
  </div>

  <van-button class="post-btn" round type="primary" icon="plus" @click="toPublish"></van-button>
</template>

<script setup>
import Swiper from '../../../components/swipe/Swiper.vue';
import scrollYdiv from '../../../components/scrollYdiv/scrollYdiv.vue';
import CommunityItem from '../../../components/communityItem/communityItem.vue';

import { getDynamicList, getNdynamicList } from '../../../network/home';

import { onMounted, reactive, ref } from 'vue';
import router from '../../../route';

import { useArticleStore } from '../../../store/article';
const articleStore = useArticleStore()

let isShow = ref(false)

const bannerList = [{
  url: '../../../../public/img/Community/swiper/1647756140193.png',
  id: 1
},
{
  url: '../../../../public/img/Community/swiper/1650860170980.png',
  id: 2
},
{
  url: '../../../../public/img/Community/swiper/1651110237775.png',
  id: 3
}]
const zoningList = [{
  userName: 'PC游戏',
  avatarUrl: '../../../../public/img/Community/zoning/1651146070907.png'
}, {
  userName: '主机游戏',
  avatarUrl: '../../../../public/img/Community/zoning/1651146140757.png'
}, {
  userName: 'Switch',
  avatarUrl: '../../../../public/img/Community/zoning/1651146145845.png'
}, {
  userName: '手机游戏',
  avatarUrl: '../../../../public/img/Community/zoning/1651146149365.png'
}, {
  userName: 'PUBG',
  avatarUrl: '../../../../public/img/Community/zoning/1651146080950.png'
}, {
  userName: 'CS:GO',
  avatarUrl: '../../../../public/img/Community/zoning/1651146084837.png'
}, {
  userName: '怪猎:世界',
  avatarUrl: '../../../../public/img/Community/zoning/1651146088771.png'
}, {
  userName: 'APEX',
  avatarUrl: '../../../../public/img/Community/zoning/1651146095043.png'
}]

// 触底加载更多
const loading = ref(false);
const finished = ref(false);
// 动态列表数据
const dynInfo = reactive([])
onMounted(async () => {
  // 获取首页动态列表 
  getDynamicList().then(res => {
    dynInfo.push(...res.data)
    isShow.value = true
  })
})
const onLoad = () => {
  // 获取首页动态列表 
  setTimeout(() => {
    getDynamicList().then(res => {
      dynInfo.push(...res.data)
      loading.value = false;
    })
  }, 1000)
};

// 下拉刷新
const pullLoading = ref(false);
const onRefresh = () => {
  if (articleStore.isPublish) {
    setTimeout(() => {
      dynInfo.unshift({
        id: 5999,
        avatarUrl: '../../../public/img/AvatarImg/tester.jpg',
        userName: 'Tester',
        level: 20,
        time: '刚刚',
        tag: 'PC游戏',
        thumbs: 0,
        comment: 0,
        contentTitle: '测试测试',
        contentText: '用于测试的文本内容 用于测试的文本内容',
        contentImgUrl: ['../../../../public/img/1646294941001.png']
      })
      articleStore.isPublish = false
      pullLoading.value = false;
    }, 1000);
  } else {
    setTimeout(() => {
      // 添加新文章
      getNdynamicList().then(res => {
        // 将最新文章添加到list头部
        dynInfo.unshift(...res.data)
      })
      pullLoading.value = false;
    }, 1000);
  }
}

const toPublish = () => {
  router.push('/publisharticles')
}

</script>

<style scoped>
.zoning-div {
  padding: 15px 12px 15px 12px;
}

.post-btn {
  width: 35px;
  height: 35px;
  background: linear-gradient(to left, #ff6034, #ee0a24);
  opacity: 0.8;
  border: none;
  position: fixed;
  right: 2.4vw;
  bottom: 16vh;
  z-index: 999;
}
</style>